<script setup lang="ts">
import FluxTrend from './FluxTrend.vue'
import VisitAmount from './VisitAmount.vue'

const activeName = ref('流量趋势')
</script>

<template>
  <div class="container_wrap">
    <el-tabs v-model="activeName">
      <el-tab-pane
        label="流量趋势"
        name="流量趋势"
      >
        <div class="pane_container">
          <FluxTrend :active-tab="activeName" />
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="访问量"
        name="访问量"
      >
        <div class="pane_container">
          <VisitAmount :active-tab="activeName" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="less">
.container_wrap {
  background: #fff;

  // el-menu
  .el-menu--collapse {
    .el-sub-menu {
      .el-sub-menu__title {
        .el-icon {
          margin-right: 0;
        }

        >span {
          display: none;
        }

        .el-sub-menu__icon-arrow {
          display: none;
        }
      }
    }
  }

  :deep(.el-tabs) {
    .el-tabs__item {
      padding-left: 20px;
    }
  }

  .pane_container {
    height: 280px;
    padding: 0 20px 20px;
  }
}
</style>
